// 页面完成基本需求，后续还会有布局和美工的调整
<template>
    <div class="claim-card">
      <div class="claim-welcome">
        <div class="claim-title">
          纸屋学术
          <span class="claim-bold-title">门户认领</span>
        </div>
      </div>
      <div class="claim-warp">
        <div class="form-warp">
          <n-form :model="modelRef" ref="formRef" :rules="rules">
            <div class="claim-form-input">
              <n-form-item path="name" label="姓名">
                <n-input
                  outlined
                  dense
                  color="#6777EF"
                  background-color="#FDFDFF"
                  placeholder="姓名"
                  v-model:value="modelRef.name"
                  validate-on-blur
                  autocomplete
                ></n-input>
              </n-form-item>
            </div>
            <div class="claim-form-input">
              <n-form-item path="org" label="机构">
                <n-input
                  outlined
                  dense
                  color="#6777EF"
                  background-color="#FDFDFF"
                  placeholder="机构"
                  v-model:value="modelRef.org"
                  validate-on-blur
                  autocomplete
                ></n-input>
              </n-form-item>
            </div>
            <div>
            </div>
            <div class="claim-form-input">
              <n-form-item path="reason" label="认领说明">
                <n-input 
                  type="textarea"
                  round="true"
                  placeholder="请填入您的门户认领说明"
                  outlined
                  dense
                  color="#6777EF"
                  background-color="#FDFDFF"
                  v-model:value="modelRef.reason"
                  validate-on-blur
                  autocomplete
                ><template #suffix>
                    <n-icon>
                      <flash-icon />
                    </n-icon>
                  </template>
                </n-input>
              </n-form-item>
            </div>
            <div>
              <n-button 
                type="info"
                elevation="4"
                min-width="180"
                color="#333333"
                class="claim-btn"
                @click="send"
              >提交</n-button>
            </div>
          </n-form>
        </div>
      </div>
    </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance, ref } from "vue";
import { useMessage } from 'naive-ui';
import { useRouter } from 'vue-router';
// 引入路由
const router = useRouter()
//用于Message弹框
const message = useMessage()
// api访问代理
const { proxy } = getCurrentInstance() as any
//获取学者id
const id = router.currentRoute.value.params.id

const formRef = ref(null)
const modelRef = ref({
  // acc: null,
  // pwd: null,
  name:null,
  org:null,
  reason:null,
})
const rules = {
  name: [
    {
      required: true,
      validator(rule: any, value: any) {
        if (!value) {
          console.log(value);
          return new Error('请输入您的姓名')
        } 
        return true
      },
      trigger: ['input', 'blur']
    }
  ],
  org: [
    {
      required: true,
      validator(rule: any, value: any) {
        if (!value) {
          console.log(value);
          return new Error('请输入您的机构')
        } 
        return true
      },
      trigger: ['input', 'blur']
    }
  ],
  reason: [
    {
      required: true,
      validator(rule: any, value: any) {
        if (!value) {
          console.log(value);
          return new Error('请输入您的认领理由')
        } 
        return true
      },
      trigger: ['textarea', 'blur']
    }
  ],
}
const send = (() => {
  console.log("准备提交门户认领")
  if (modelRef.value.name == null || modelRef.value.name == "") {
    message.warning("请输入您的姓名");
  }
  else if (modelRef.value.org == null || modelRef.value.org == "") {
    message.warning("请输入您的机构");
  }
  else if (modelRef.value.reason == null || modelRef.value.reason == "") {
    message.warning("请输入您的认领理由");
  }
  else {
    proxy.$api.entity.send({ 
      id: id,
      name: modelRef.value.name, 
      org: modelRef.value.org,
      reason: modelRef.value.reason,
    }).then((result: any) => {
      if (result.success) {
        message.success("提交成功，请等待管理员审核")
        router.push({ name: "UserInfo", query: { id: id } })
      } else {
        message.error("提交失败:"+result.msg)
      }
    }).catch(() => {
      message.error('发生了其它错误')
    });
  }
})
</script>
<style scoped>
.claim-card {
  border-top: 3px solid #666;
  margin: 6% auto;
  width: 800px;
  border-radius: 5px;
  box-shadow: 0 8px 6px hsl(0deg 0% 78% / 50%);
  min-height: 480px;
}
.claim-warp {
  margin: 5% auto;
  width: 50%;
  margin-top: 6%;
}

.claim-welcome {
  border-left: 5px solid #666;
  margin-left: 24.7%;
  margin-top: 5%;
}
.claim-title {
  margin-left: 10px;
  font-size: 25px;
}

.claim-bold-title {
  font-weight: bold;
}

.form-warp {
  margin-top: 10%;
}

.claim-form-input {
  margin-top: 10px;
  margin-bottom: 20px;
}

.claim-btn {
  color: white;
  margin: 10% auto;
  margin-left: 88%;
}
</style>